<template>
    <div>
        <div v-if="!paperPracticeList.length" style="margin-left: 5px;">
            暂无数据
        </div>
        <div v-else v-for="(practice, index) in paperPracticeList" :key="index">
            <div class="item-practice">
                <div>
                    <div>
                        <span class="practice-type">{{ practiceTypeChange(practice.practiceType) }}</span>
                        <span class="practice-type">科属：{{ practice.projectType }}</span>
                    </div>
                    <div v-html="practice.askItem"></div>
                </div>
                <div style="margin-top: 20px;font-size: 14px;">
                    <div style="margin-right: 30px;padding: 10px 0;" v-for="(question, index) in parseQuestion(practice.question)"
                        :key="index">
                        <span>{{ question.type }}.&nbsp;</span>
                        <span>{{ question.value }}</span>
                    </div>
                </div>
                <div style="margin-top: 20px;font-size: 14px;">
                    <span>正确答案：{{ practice.rightAnswer }}</span>
                    <span @click="removePractice(practice.id)"
                        style="font-size: 12px;margin-top: 5px;margin-left: 20px;">
                        <i class="el-icon-circle-close"></i>&nbsp;移除</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            paperInfo: {},
            paperPracticeList: [],
            paperInfo: {}
        }
    },
    created() {
        const paperJson = sessionStorage.getItem('paperInfo');
        this.paperInfo = JSON.parse(paperJson);
        this.loadPracticeList(this.paperInfo.id);
    },
    methods: {
        parseQuestion(question) {
            const questionEntity = JSON.parse(question);
            let questionList = [];
            if (questionEntity !== null) {
                for (const question of questionEntity) {
                    questionList.push(question);
                }
                return questionList;
            }

        },
        handleCurrentChange(current) {
            this.current = current;
            this.loadPracticeList(this.paperInfo.id);
        },
        async removePractice(id) {
            const confirmed = await this.$swalConfirm({
                title: '题目移除',
                text: `此操作将移除该题目, 是否继续?`,
                icon: 'info',
            });
            if (confirmed) {
                let ids = [id];
                this.$axios.post(`/paper-practice/batchDelete`, ids).then(response => {
                    const { data } = response;
                    if (data.code === 200) {
                        this.$message('题目移除成功');
                        this.loadPracticeList(this.paperInfo.id);
                    }
                })
            }
        },
        practiceTypeChange(type) {
            if (type === '1') {
                return '单选题';
            } else if (type === '2') {
                return "多选题";
            } else if (type === '3') {
                return "填空题";
            } else {
                return "判断题";
            }
        },
        // 加载试卷现有的题目列表
        loadPracticeList(paperId) {
            const paperPracticeQueryDto = { paperId: paperId }
            this.$axios.post(`/paper-practice/query`, paperPracticeQueryDto).then(response => {
                const { data } = response;
                if (data.code === 200) {
                    this.paperPracticeList = data.data;
                }
            })
        },
    }
};
</script>
<style scoped lang="scss">
.item-practice {
    padding: 10px 0px;
    margin: 20px 0;
    cursor: pointer;
    background-color: #fff;
    border-left: 2px solid #fff;
    border-radius: 3px;
    transition: all 0.5s;
}

.practice-type {
    margin-right: 10px;
    display: inline-block;
    padding: 3px 5px;
    border-radius: 3px;
    background-color: rgb(235, 237, 245);
    color: rgb(43, 121, 203);
    font-size: 12px;
}
</style>